<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
 <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<!-- 加载引用文件 -->
<%@ include file="../common/verify.jsp"%>
<jsp:include page="../common/meta.jsp"></jsp:include>
<jsp:include page="../common/easyui.jsp"></jsp:include>
<script type="text/javascript">
	var topItemDataGrid;
	var editTopItemWindow;
	var editTopItemForm;
	var topItemRowIndex;
	$(function() {
		// 		$('#topItemLayout').layout();
		// 		$('#topItemLayout').layout('collapse','north');

		topItemDataGrid = $('#topItemDataGrid').datagrid({
			url : 'json/topItem_listByPage',
			toolbar : '#toolbar',
			title : '网址列表',
			iconCls : 'icon-save',
			pagination : true,
			pageSize : 10,
			pageList : [10, 20, 30],
			fit : true,
			fitColumns : true,
			nowrap : false,
			border : true,
			idField : 'id',
			columns : [[{
				title : '编码',
				field : 'id',
				width : 30,
				sortable : true
			}, {
				title : 'Top分类',
				field : 'classId',
				width : 30
			}, {
				title : '网址编码',
				field : 'itemId',
				width : 50
			}, {
				title : '网址名称',
				field : 'itemName',
				width : 50
			}, {
				title : '网址',
				field : 'itemUrl',
				width : 150
			}, {
				title : '网址分类',
				field : 'itemClass',
				width : 50
			}, {
				title : '排序',
				field : 'orderNum',
				width : 35
			}]],
			onSelect : function(rowIndex, rowData) {
				console.info('当前选择的行：' + rowIndex);
				topItemRowIndex = rowIndex;
			},
			loadMsg : '加载中，请稍候...'
		});

		editTopItemWindow = $('#editTopItemWindow').window({
			closed : true,
			modal : true
		});

		editTopItemForm = editTopItemWindow.find('form');

		$('#btnSaveTopItem').linkbutton();
		$('#btnCloseTopItemWindow').linkbutton();

		// 加载网址分类列表选项
		$('#topItem_classId').combobox({
			url : 'json/topClass_list',
			valueField : 'id',
			textField : 'name'
		});

		$('#condition_classId').combobox({
			url : 'json/topClass_list',
			valueField : 'id',
			textField : 'name'
		});
	});

	function newTopItem() {
		console.info('增加...');
		editTopItemWindow.window('open');
		editTopItemWindow.find('#topItem_id').attr('readonly', true);
		editTopItemWindow.find('#topItem_itemid').attr('readonly', false);
		editTopItemWindow.find('#topItem_itemName').attr('readonly', false);
		editTopItemWindow.find('#topItem_itemUrl').attr('readonly', false);
		editTopItemWindow.find('#topItem_itemClass').attr('readonly', false);
		editTopItemForm.form('clear');
		editTopItemWindow.find('#topItem_id').val(0);
		editTopItemWindow.find('#topItem_itemUrl').val("http://");
		editTopItemForm.url = 'json/topItem_add';
	}

	function editTopItem() {
		console.info('修改...');
		// 选择最后选中的行
		topItemDataGrid.datagrid('clearSelections');
		topItemDataGrid.datagrid('selectRow', topItemRowIndex);

		var row = topItemDataGrid.datagrid('getSelected');
		if (row) {
			editTopItemWindow.window('open');
			editTopItemWindow.find('#topItem_id').attr('readonly', true);
			editTopItemWindow.find('#topItem_itemid').attr('readonly', true);
			editTopItemWindow.find('#topItem_itemName').attr('readonly', true);
			editTopItemWindow.find('#topItem_itemUrl').attr('readonly', true);
			editTopItemWindow.find('#topItem_itemClass').attr('readonly', true);
			editTopItemForm.form('clear');
			editTopItemWindow.find('#topItem_id').val(row.id);
			editTopItemWindow.find('#topItem_classId').val(row.classId);
			editTopItemWindow.find('#topItem_itemId').val(row.itemId);
			editTopItemWindow.find('#topItem_itemName').val(row.itemName);
			editTopItemWindow.find('#topItem_itemUrl').val(row.itemUrl);
			editTopItemWindow.find('#topItem_itemClass').val(row.itemClass);
			editTopItemWindow.find('#topItem_orderNum').val(row.orderNum);
			if (row.classId != null) {
				editTopItemWindow.find('#topItem_classId').combobox('setValue',
						row.classId);
			}
			editTopItemForm.url = 'json/topItem_update';
		} else {
			$.messager.alert('提示', '请选择要修改的记录！', 'error');
		}
	}

	function removeTopItem() {
		console.info('删除...');
		var itemID = [];
		var rows = topItemDataGrid.datagrid('getSelections');
		if (rows.length > 0) {
			$.messager.confirm('请确认', '您要删除当前所选项目？', function(r) {
				if (r) {
					for ( var i = 0; i < rows.length; i++) {
						console.info(rows[i].id);
						itemID.push(rows[i].id);
					}
					$.ajax({
						url : 'json/topItem_delete',
						data : {
							id : itemID.join(',')[0]
						},
						cache : false,
						dataType : "json",
						success : function(response) {
							topItemDataGrid.datagrid('unselectAll');
							topItemDataGrid.datagrid('reload');
							$.messager.show({
								title : '提示',
								msg : '删除成功！'
							});
						}
					});
				}
			});
		} else {
			$.messager.alert('提示', '请选择要删除的记录！', 'error');
		}
	}

	// 保存新增分类
	function saveTopItem() {
		console.info('保存...');
		if (editTopItemForm.url == '') {
			editTopItemForm.url = 'json/topItem_add';
		}

		editTopItemForm.form('submit', {
			url : editTopItemForm.url,
			success : function(data) {
				console.info(data);
				editTopItemWindow.window('close');
				topItemDataGrid.datagrid('reload');
				$.messager.show({
					title : '提示',
					msg : '增加成功！'
				});
			},
			error : function(json) {
				console.info('保存出错！');
			}
		});
	}

	function closeTopItemWindow() {
		editTopItemWindow.window('close');
	}

	function searchTopItem() {
		console.info('查询...');
		var urlClassID = $('#condition_classId').combotree('getValues');
		console.info("classID: " + urlClassID);
		topItemDataGrid.datagrid('load', {
			urlClassID : urlClassID.join(',')
		});

		$.messager.show({
			title : '提示',
			msg : '查询成功！'
		});

	}

	function resetSearch() {
		console.info('清空查询条件');
		$('#searchBox input').val('');
		topItemDataGrid.datagrid('load', {});
	}
</script>
<title>网址列表</title>
</head>
<body style="width: 720px; height: 480px; margin: 0 auto;">
	<div title="网址列表" border="false" closable="true"
		style="width: 100%; height: 100%;">
		<div id="topItemLayout" class="easyui-layout"
			style="width: 100%; height: 100%;">
			<div region="north" border="false">
				<div id="searchBox">
					<fieldset>
						<legend>筛选</legend>
						<table class="tableForm">
							<tr>
								<th>Top分类</th>
								<td><input id="condition_classId" name="topItem.classId"
									class="easyui-combotree" style="width: 105px;" /></td>
							</tr>
							<tr>
								<th>网址名称</th>
								<td colspan="2"><input name="topItem.name"
									style="width: 305px;" /></td>
							</tr>
							</table>
					</fieldset>
				</div>
			</div>
			<div region="center" border="false"
				style="width: 100%; height: 100%; overflow: hidden">
				<div id="toolbar" class="datagrid-toolbar"
					style="height: auto; display: none;">
					<a class="easyui-linkbutton" iconCls="icon-add"
						onclick="newTopItem();" plain="true" href="javascript:void(0);">增加</a>
					<a class="easyui-linkbutton" iconCls="icon-remove"
						onclick="removeTopItem();" plain="true" href="javascript:void(0);">删除</a>
					<a class="easyui-linkbutton" iconCls="icon-edit"
						onclick="editTopItem();" plain="true" href="javascript:void(0);">编辑</a>
					<a class="easyui-linkbutton" iconCls="icon-undo"
						onclick="datagrid.datagrid('unselectAll');" plain="true"
						href="javascript:void(0);">取消选中</a>
				</div>
				<table id="topItemDataGrid"></table>
			</div>
		</div>
	</div>

	<div id="editTopItemWindow" title="网址条目"
		style="width: 550px; height: 350px;">
		<div style="padding: 15px 15px 15px 15px;">
			<form method="post">
				<table>
					<tr>
						<td>编码：</td>
						<td><input id="topItem_id" name="topItem.id"
							style="width: 150px"></input></td>
					</tr>
					<tr>
						<td>Top分类：</td>
						<td><input id="topItem_classId" name="topItem.classId"
							style="width: 250px"></input></td>
					</tr>
					<tr>
						<td>网址编码：</td>
						<td><input id="topItem_itemId" name="topItem.itemId"
							style="width: 250px"></input></td>
					</tr>
					<tr>
						<td>网址标题：</td>
						<td><input id="topItem_itemName" name="topItem.itemName"
							style="width: 250px"></input></td>
					</tr>
					<tr>
						<td>网址地址：</td>
						<td><input id="topItem_itemUrl" name="topItem.itemUrl"
							style="width: 350px"></input></td>
					</tr>
					<tr>
						<td>网址分类：</td>
						<td><input id="topItem_itemClass" name="topItem.itemClass"></td>
					</tr>
					<tr>
						<td>排序号：</td>
						<td><input id="topItem_orderNum" name="topItem.orderNum"></td>
					</tr>
				</table>
			</form>
		</div>
		<div style="text-align: center; padding: 20px;">
			<a href="javascript:void(0)" onclick="saveTopItem()"
				id="btnSaveTopItem" icon="icon-save">保存</a> <a
				href="javascript:void(0)" onclick="closeTopItemWindow()"
				id="btnCloseTopItemWindow" icon="icon-cancel">取消</a>
		</div>
	</div>
</body>
</html>